<template>
  <div>
    <div v-if="movie_wall_datas && movie_wall_datas.length > 0">
      <nut-infiniteloading
        @loadmore="onInfinite"
        :is-show-mod="true"
        :has-more="isHasMore"
        :is-loading="isLoading"
        :threshold="200"
      >
        <div class="movie-wall-wrappr flex f-w-w">
          <movie-poster
            v-for="item in movie_wall_datas"
            :key="item.id"
            :movie="item"
          ></movie-poster>
        </div>
      </nut-infiniteloading>
    </div>
    <div class="no-datas-tip flex f-jc-c f-ai-c" v-if="!requested">
      <span class="iconfont icon-jiazai1"></span>
      <span class="loading-text">加载中...</span>
    </div>
    <div
      class="no-datas-tip flex f-jc-c f-ai-c"
      v-if="requested && movie_wall_datas.length === 0"
    >
      <span class="loading-text">空空如也</span>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { InfiniteLoading } from "@nutui/nutui";
InfiniteLoading.install(Vue);
import MoviePoster from "../../components/MoviePoster";
import { mapState, mapActions } from "vuex";
export default {
  name: "MovieWallModule",
  components: {
    MoviePoster
  },
  data() {
    return {
      isHasMore: true,
      isLoading: false,
      isErr: false,
      timer: null
    };
  },
  computed: {
    ...mapState({
      movie_wall_datas: state => state.movie_wall.movie_wall_datas,
      requested: state => state.movie_wall.requested
    })
  },
  mounted() {
    this.updateMovieWallDatas();
  },
  methods: {
    ...mapActions({
      addMovieWallDatas: "movie_wall/addMovieWallDatas",
      updateMovieWallDatas: "movie_wall/updateMovieWallDatas"
    }),
    onInfinite() {
      this.isLoading = true;
      this.timer = setTimeout(() => {
        this.addMovieWallDatas().then(
          () => {
            this.isHasMore = false;
          },
          () => {}
        );
        this.isLoading = false;
      }, 100);
    }
  },
  destroyed() {
    clearTimeout(this.timer);
  }
};
</script>

<style scoped>
.movie-wall-wrappr {
  margin: 10px 10px 0 10px;
  padding: 5px 0;
  width: 355px;

  background: white;
}
.no-datas-tip {
  margin-top: 10px;
  width: 100%;
  height: 80px;
  background: white;
}
@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.icon-jiazai1 {
  font-size: 20px;
  color: gray;
  animation: loading 0.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.loading-text {
  margin-left: 5px;
  font-size: 14px;
  color: #555;
}
</style>
